<template>
  <MyDialog
    :dialog-form="dialogForm"
    :dialog-visible="dialogVisible"
    @dialogClose="onClose"
    @dialogConfirm="onSubmit"
  >
    <template #dialogBox>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        status-icon
        @submit.native.prevent
      >
        <el-form-item label="名称" prop="deptName">
          <el-input
            v-model="ruleForm.deptName"
            maxlength="16"
            placeholder="输入部门名称"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </template>
  </MyDialog>
</template>

<script setup lang="ts">
import { ref, watch, reactive, defineAsyncComponent } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { postAddDept, editDept } from '/@/api/setting/structure'
const MyDialog = defineAsyncComponent(
  () => import('/@/components/dialog/index.vue')
)
const ruleFormRef = ref<FormInstance>()

// 定义父组件传过来的值
const props = defineProps({
  myDialog: {
    type: Boolean,
    default: () => false
  },
  node: {
    type: Object,
    default: () => {}
  },
  type: {
    type: Number,
    default: () => 1 // 1 新增   2 编辑
  }
})
const emit = defineEmits(['flash'])

const dialogVisible = ref<boolean>(false) //弹窗是否出现
const dialogForm = reactive({
  width: '30%',
  title: '新增部门'
})
const ruleForm = reactive({
  deptName: ''
})

const rules = reactive<FormRules>({
  deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]
})

watch(
  () => props.myDialog,
  () => {
    if (props.type == 1) {
      dialogForm.title = '新增部门'
    } else {
      dialogForm.title = '编辑部门名称'
      ruleForm.deptName = props.node.deptName
    }
    dialogVisible.value = true
  }
)

const onClose = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
  dialogVisible.value = !dialogVisible.value
}

const onSubmit = async () => {
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      if (props.type == 1) {
        let param = {
          parentId: props.node.id,
          parentName: props.node.deptName,
          deptName: ruleForm.deptName
        }
        let res = await postAddDept(param)
        if (res.code == 0) {
          ruleFormRef.value.resetFields()
          dialogVisible.value = !dialogVisible.value
          emit('flash')
          ElMessage.success('添加成功！')
        }
      } else {
        let param = {
          id: props.node.id,
          deptName: ruleForm.deptName
        }
        let res = await editDept(param)
        if (res.code == 0) {
          ruleFormRef.value.resetFields()
          dialogVisible.value = !dialogVisible.value
          emit('flash')
          ElMessage.success('编辑成功！')
        }
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
